<template>
    <!--模板里只能有一个div,根标签-->
    <div id="app">
        <h1>自定义的一个demo01的组件</h1>
        <h3>{{username}}</h3>
        <button @click="changeName">修改username</button>
        <button @click="changePwd">修改password</button>
        <h4>{{password}}</h4>
        <div>
            <!--  创建两个组件          -->
<!--            使用全局组件-->
<!--            <MyCount></MyCount>-->
            <h2>测试兄弟组件传值</h2>
            <Brother1></Brother1>
            <Brother2></Brother2>
        </div>
    </div>
<!--    <div>-->
<!--        -->
<!--    </div>-->
</template>

<script>
    // new Vue({
    //     el:
    // })
    import Brother1 from "@/components/Brother1";
    import Brother2 from "@/components/Brother2";
    export default {
        name: "Demo01",
        components:{
          Brother1,Brother2
        },
        //参数一定要函数的格式 如： data(){}
        data(){
            return{
                username:'laozhang',
                password:'123456'
            }
        },
        //定义方法
        methods:{
            changeName(){
                this.username = 'laoli'
            },
            changePwd(){
                this.password = 'root'
            }
        }
    }
</script>

<style scoped>
    #app{
        background-color: #42b983;
    }
</style>